<template>
    <div class="divEcharts" ref="main"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: {
        arrWork: JSON
    },
    mounted() {
        this.getEcharts();
    },
    watch: {
        arrWork: {
            handler(newData, oldData) {
                this.getEcharts();
            },
            deep: true,  //深度监听，默认为false
            // immediate: true //首次就执行，默认false
        }
    },
    methods: {
        getEcharts() {
            const myChart = echarts.init(this.$refs.main);
            myChart.setOption({
                title: {
                    text: '未来七天温度'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.arrWork.arrWeek,

                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                series: [
                    {
                        name: '最好温度',
                        type: 'line',
                        label: {
                            show: true,
                            position: 'top'
                        },
                        data: this.arrWork.arrTem1,
                        markPoint: {
                            data: [
                                { type: 'max', name: 'Max' },
                                { type: 'min', name: 'Min' }
                            ]
                        },
                        markLine: {
                            data: [{ type: 'average', name: 'Avg' }]
                        }
                    },
                    {
                        name: '最低温度',
                        type: 'line',
                        label: {
                            show: true,
                            position: 'top'
                        },
                        data: this.arrWork.arrTem2,
                        markPoint: {
                            data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: 'Avg' },
                                [
                                    {
                                        symbol: 'none',
                                        x: '90%',
                                        yAxis: 'max'
                                    },
                                    {
                                        symbol: 'circle',
                                        label: {
                                            position: 'start',
                                            formatter: 'Max'
                                        },
                                        type: 'max',
                                        name: '最高点'
                                    }
                                ]
                            ]
                        }
                    }
                ]
            });
        }
    }

}
</script>

<style>
.divEcharts {
    margin-left: 6px;
    margin-top: 6px;
    width: 97%;
    height: 97%;
    border: 0px blue solid;
    border-radius: 10px;
    box-shadow: 0px -5px 4px 0px #2279ee,
        -6px 0px 4px 0px #2279ee,
        6px 0px 4px 0px #2279ee,
        0px 5px 4px 0px #2279ee;
}
</style>